<template>
  <div class="informationShow">
    <el-row :gutter="10" :data="data">
      <div :class="detailInfoWrap">
        <!--客户信息-->
        <el-col :span="24" class="mgb10"><b>{{ option.title }}</b></el-col>
        <el-col v-for="(item, index) in option.cusList" :key="index" class="mb5" :span="item.span">
          <div><span>{{ item.label }} ：</span><span>{{ item | dataDicTrans(data.cusInfo) }}</span></div>
        </el-col>
        <!--法人代表基本信息--><!--经办人基本信息-->
        <div v-for="(item1, index1) in option.resList" v-if="item1.isShowFlag" :key="'item1' + index1">
          <el-col :span="24" class="mgb10">
            <b class="res-title">{{ item1.title }}</b>
            <button
              :class="[resToggleClass[index1] ? 'el-icon-caret-top' : 'el-icon-caret-bottom', 'color-red', 'arrow']"
              @click="clickChild(index1)"
            />
          </el-col>
          <div v-show="resListDetailShow[index1]" :gutter="10">
            <el-col v-for="(item2, index2) in item1.childList" :key="'item2' + index2" class="mb5" :span="8">
              <div><span>{{ item2.label }} ：</span><span>{{ item2 | dataDicTrans(data.resList[index1]) }}</span></div>
            </el-col>
          </div>
        </div>
      </div>
      <el-col :span="24" class="detailInfoBtn">
        <el-button class="custInfoBtn" @click="custInfoBtn" v-html="custInfoBtnTit" />
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'InformationCompanyShow',
  props: ['data', 'option'],
  data() {
    return {
      detailInfoWrap: 'cus-info-simple',
      resToggleClass: [],
      resListDetailShow: [],
      custInfoBtnTit: '详细信息'
    }
  },
  methods: {
    custInfoBtn() {
      this.detailInfoWrap = this.detailInfoWrap == 'cus-info-simple' ? 'cus-info-detail' : 'cus-info-simple'
      if (this.detailInfoWrap == 'cus-info-simple') {
        this.custInfoBtnTit = '详细信息'
      } else {
        this.custInfoBtnTit = '收起'
      }
    },
    clickChild(index) {
      console.log('111 is: ' + this.resToggleClass[index] + ',222 is: ' + this.resListDetailShow[index])
      this.$set(this.resToggleClass, index, !this.resToggleClass[index])
      this.$set(this.resListDetailShow, index, !this.resListDetailShow[index])
      console.log('111 is: ' + this.resToggleClass[index] + ',222 is: ' + this.resListDetailShow[index])
    }
  }
}
</script>

<style scoped>

  .mb5 {
    margin-bottom: 5px;
  }

  .informationShow .el-col {
    line-height: 24px;
  }

  .mgb10 {
    margin-bottom: 10px;
  }

  .res-title {
    margin-right: 10px;
  }

  .detailInfoWrap {
    height: 90px;
    overflow: hidden;
  }

  .detailInfoBtn {
    text-align: right;
    height: 40px;
    line-height: 40px;
    border-top: 1px #ccc dashed;
    padding-top: 8px;
  }

  .cus-info-simple {
    height: 63px;
    overflow: hidden;
  }

  .cus-info-detail {
    height: auto;
    overflow: hidden;
  }

  .show-icon {
    display: none;
  }

  .basicMsg {
    display: none;
  }

  .agentMsg {
    display: none;
  }
</style>
